<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>模板引用</title>
        <link rel="stylesheet" href="props-shopping-cart.css">
    </head>
    <div>

        <div id="application" v-cloak></div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>
        <script>

            const ButtonCounter = {
                template: `<button @click="increase">你已经把我点了{{counter}}次</button>`,
                data() {
                    return { counter: 0 }
                },
                methods: {
                    increase(){
                        this.counter++;
                    }
                }
            }

            const App = {
                components: {
                    ButtonCounter
                },
                template: `<div class="wrapper">
                               <div class="first" ref="first">
                                  <input type="text" v-model="username" ref="unameInput">
                                  <p ref="show">username: {{username}}</p>
                               </div>
                               <ButtonCounter ref="second"></ButtonCounter>
                               <div v-for="item in items" ref="items">
                                  {{item}}
                               </div>
                           </div>`,
                data() {
                    return {
                        username: '',
                        items: [ '王者农药', '敌敌畏', '1605', '百草枯' ]
                    }
                },
                mounted() {
                    console.log( this.$refs );
                    console.log( this.$refs.unameInput );
                }
            }
            Vue.createApp(App).mount('#application');
        </script>
    </div>
</html>